<!--分页数据模板-->
<template>
    <div class="app-container">
        <vxe-toolbar ref="xToolbar" custom>
            <template #buttons>
                <!--todo 需要动态生成-->
                <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" >
                        ${columnInfo.columnComment}：<el-input v-model="condition.${columnInfo.columnName}" placeholder="${columnInfo.columnName}" style="width: 200px;margin-right: 10px" class="filter-item" />
                    </#if>
                </#list>
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="page()">搜索</el-button>
                <!--todo 需要动态生成-->
                <el-button v-if="checkPermission(['sys:${authInfo}:add'])" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="edit(0)">新增</el-button>
                <el-button v-if="checkPermission(['sys:${authInfo}:delete'])" type="danger" icon="el-icon-close" @click="batchDel()">删除</el-button>
            </template>
        </vxe-toolbar>
        <!--table-->
        <vxe-table
                ref="xTable"
                border
                stripe
                highlight-hover-row
                show-overflow
                resizable
                row-id="id"
                size="normal"
                :data="tableData"
        >
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
            <vxe-table-column field="id" title="ID"></vxe-table-column>
            <!--todo 需要动态生成-->
            <#list columnInfos as columnInfo>
                <#if columnInfo.columnName != "id" && columnInfo.columnName != "delFlag" >
                    <vxe-table-column field="${columnInfo.columnName}" title="${columnInfo.columnComment}" />
                </#if>
            </#list>
            <vxe-table-column title="操作" fixed="right" width="200">
                <template #default="{row}">
                    <!--todo 需要动态生成-->
                    <el-button v-if="checkPermission(['sys:${authInfo}:update'])" type="success" size="small" icon="el-icon-edit" @click="edit(1, row)">修改</el-button>
                    <el-button v-if="checkPermission(['sys:${authInfo}:delete'])" type="danger" size="small" icon="el-icon-close" @click="del(row.id)">删除</el-button>
                </template>
            </vxe-table-column>
        </vxe-table>

        <vxe-pager
                background
                size="small"
                :current-page="condition.pageNum"
                :page-size="condition.pageSize"
                :total="condition.totalSize"
                :page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                @page-change="pageChange"></vxe-pager>
        <!--edit-->
        <el-dialog :visible.sync="dialogVisible" title="编辑">
            <!--todo 需要动态生成-->
            <el-form>
                <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" >
                        <el-form-item label="${columnInfo.columnComment}">
                            <el-input v-model="form.${columnInfo.columnName}" placeholder="${columnInfo.columnName}" />
                        </el-form-item>
                    </#if>
                </#list>
            </el-form>
            <div style="text-align:right;">
                <el-button type="danger" @click="dialogVisible=false">取消</el-button>
                <!--todo 需要动态生成-->
                <el-button v-if="checkPermission(['sys:${authInfo}:add','sys:${authInfo}:update'])" type="primary" @click="edit(2)">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import checkPermission from '@/utils/permission' // 权限判断函数
    import {
        add${uppercaseName},
        del${uppercaseName},
        update${uppercaseName},
        get${uppercaseName},
        page${uppercaseName}
    } from '@/api/${apiPath}'

    export default {
        data() {
            return {
                dialogVisible: false,
                // 表数据
                tableData: [],
                // 条件数据
                condition: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 0,
                    <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" >
                         ${columnInfo.columnName}: '',
                    </#if>
                    </#list>
                },
                // 添加表单数据
                form: {
                    id: -1,
                    <#list columnInfos as columnInfo>
                    <#if columnInfo.columnName != "id" &&  columnInfo.columnName != "createTime" && columnInfo.columnName != "updateTime" && columnInfo.columnName != "delFlag" >
                    ${columnInfo.columnName}: '',
                    </#if>
                    </#list>
                }
            }
        },
        created() {
            // 初始化分页
            this.page()
            // 将表格和工具栏进行关联
            this.$nextTick(() => {
                const $table = this.$refs.xTable
                $table.connect(this.$refs.xToolbar)
            })
        },
        methods: {
            add(data) {
                add${uppercaseName}(data).then(response => {
                    this.$message({ type: 'success', message: response.msg })
                    this.page()
                })
            },
            del(id) {
                this.$confirm('是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del${uppercaseName}(id).then(response => {
                        this.$message({ type: 'success', message: response.msg })
                        this.page()
                    })
                }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
            },
            update(data) {
                update${uppercaseName}(data).then(response => {
                    this.$message({ type: 'success', message: response.msg })
                    this.page()
                })
            },
            get(id) {
                get${uppercaseName}(id).then(response => {
                    this.form = response.data
                })
            },
            page() {
                page${uppercaseName}(this.condition).then(response => {
                    this.tableData = response.data.list
                    this.condition.totalSize = response.data.total
                })
            },
            pageChange({ currentPage, pageSize }) {
                this.condition.pageNum = currentPage
                this.condition.pageSize = pageSize
            },
            edit(type, row) {
                // 0 增加 1 修改  2 保存增加/修改
                if (type === 0) {
                    this.form = { id: -1 }
                    this.dialogVisible = true
                } else if (type === 1) {
                    get${uppercaseName}(row.id).then(response => {
                        this.form = response.data
                        this.dialogVisible = true
                    })
                } else if (type === 2) {
                    this.form.state = 0
                    if (this.form.id > 0) {
                        this.update(this.form)
                    } else {
                        this.add(this.form)
                    }
                    this.dialogVisible = false
                    this.page()
                }
            },
            batchDel() {
                this.$confirm('是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const selectRecords = this.$refs.xTable.getCheckboxRecords()
                    for (let i = 0; i < selectRecords.length; i++) {
                        del${uppercaseName}(selectRecords[i].id).then(response => {
                            console.log(response)
                        })
                    }
                    this.$message({ type: 'success', message: 'ok' })
                    this.page()
                }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
            },
            checkPermission // 验证权限
        }
    }
</script>
